<template>
    <div class="exam-detail">
        <div class="detail-header">
            <el-tag style="font-size: medium;" >{{ examDetail.subjectName }}</el-tag>
        </div>

        <el-card v-loading="loading">
            <template #header>
                <!-- <div class="card-header">
          <span>{{ examDetail.examinationType }}</span>
          <el-tag>{{ examDetail.subjectName }}</el-tag>
        </div> -->
                <!-- <span class="exam-type">{{ examDetail.examinationType }}</span> -->
                <h3 class="exam-title">{{ examDetail.name }}</h3>
                
            </template>

            <el-descriptions :column="2" border>
                <el-descriptions-item label="考试时间">
                    {{ examDetail.startTime }} ~ {{ examDetail.endTime }}
                </el-descriptions-item>
                <el-descriptions-item label="考试时长">
                    {{ formatDuration(examDetail.duration) }}
                </el-descriptions-item>
                <el-descriptions-item label="总分">
                    {{ examDetail.totalScore }}
                </el-descriptions-item>
                <el-descriptions-item label="类型">
                    {{ examDetail.examinationType }}
                </el-descriptions-item>
            </el-descriptions>

            <div class="rules-section">
                <h3>考试规则</h3>
                <el-alert v-for="rule in examRules" :key="rule.id" :title="rule.title" :description="rule.content"
                    type="info" :closable="false" show-icon class="rule-item" />
            </div>

            <div class="settings-section">
                <h3>考试要求</h3>
                <el-alert v-if="examSettings.requireFullscreen" title="全屏要求" description="考试过程中必须保持全屏状态" type="warning"
                    :closable="false" show-icon class="setting-item" />
                <el-alert v-if="!examSettings.allowCopyPaste" title="复制粘贴限制" description="考试过程中禁止复制粘贴" type="warning"
                    :closable="false" show-icon class="setting-item" />
                <el-alert v-if="examSettings.maxSwitchCount" title="切屏限制"
                    :description="`考试过程中最多允许切换窗口 ${examSettings.maxSwitchCount} 次`" type="warning" :closable="false"
                    show-icon class="setting-item" />
            </div>

            <div class="confirm-section">
                <el-checkbox v-model="rulesConfirmed">
                    我已阅读并同意遵守以上考试规则和要求
                </el-checkbox>
                <br>
                <el-button type="primary" @click="handleStartExam" :loading="loading">
                开始考试
            </el-button>
            </div>
            
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getExamDetailSimple, getExamRules } from '@/api/student/exam'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const rulesConfirmed = ref(false)

const examDetail = reactive({
    name:'',
    examinationType: '',
    subjectName: '',
    startTime: '',
    endTime: '',
    duration: 0,
    totalScore: 0
})

const examRules = ref([])
const examSettings = reactive({
    requireFullscreen: false,
    allowCopyPaste: true,
    maxSwitchCount: 0,
    allowSwitchScreen: true
})

const formatDuration = (seconds) => {
    const hours = Math.floor(seconds / 3600)
    const minutes = Math.floor((seconds % 3600) / 60)
    return `${hours}小时${minutes}分钟`
}

const fetchExamDetail = async () => {
    loading.value = true
    try {
        const { data } = await getExamDetailSimple(route.params.id)
        Object.assign(examDetail, data)
    } catch (error) {
        console.error('Failed to fetch exam detail:', error)
    } finally {
        loading.value = false
    }
}

const fetchExamRules = async () => {
    loading.value = true
    try {
        const { data } = await getExamRules(route.params.id)
        examRules.value = data.rules
        Object.assign(examSettings, data.settings)
    } catch (error) {
        console.error('Failed to fetch exam rules:', error)
    } finally {
        loading.value = false
    }
}

const handleStartExam = async () => {
    if (!rulesConfirmed.value) {
        ElMessage.warning('请先确认考试规则')
        return
    }

    try {
        loading.value = true

        // 检查考试是否在有效时间内
        const now = new Date()
        const startTime = new Date(examDetail.startTime)
        const endTime = new Date(examDetail.endTime)

        if (now < startTime) {
            ElMessage.warning('考试还未开始')
            return
        }

        if (now > endTime) {
            ElMessage.warning('考试已结束')
            return
        }

        await router.push(`/exam/${route.params.id}/take`)
    } catch (error) {
        console.error('考试开始失败:', error)
        ElMessage.error('开始考试失败，请稍后重试')
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    fetchExamDetail()
    fetchExamRules()
})
</script>

<style lang="scss" scoped>
.exam-title {
    flex: 1;
    margin: 0 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #a1a3e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.exam-detail {
    .detail-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        h2 {
            margin: 0;
        }
    }
    .card-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .rules-section,
    .settings-section {
        margin-top: 24px;

        h3 {
            margin-bottom: 16px;
        }

        .rule-item,
        .setting-item {
            margin-bottom: 12px;
        }
    }

    .confirm-section {
        margin-top: 24px;
        text-align: center;
    }
}
</style>